<!DOCTYPE html>
<html>
<head>
       <title>SVG作业</title>
</head>
<body>
  <div style="width:30%; height:30%; background:white;">
      <h1>First SVG</h1><img src="svg1.svg" alt="Amazing line art of a scone" /> 
      <h2>Second SVG</h2><img src="svg2.svg" alt="Amazing line art of a scone" />
  </div>
	  <div class="Character">
	  <style>
			:root {
				--pixel-size: 6;
			}

			body {
				background: ghostwhite;
			}

			.Character {
				width: calc(32px * var(--pixel-size));
				height: calc(32px * var(--pixel-size));
				overflow: hidden;
				position: relative;
				margin: 4em auto;
			}

			.Character_spritesheet {
				animation: moveSpritesheet 1s steps(4) infinite;
				width: calc(128px * var(--pixel-size));
				position: absolute;

			}

			.Character_shadow {
				position: absolute;
				width: calc(32px * var(--pixel-size));
				height: calc(32px * var(--pixel-size));
			}

			.pixelart {
				image-rendering: pixelated;
			}

			.face-right {
				top: calc(-32px * var(--pixel-size));
			}

			.face-up {
				top: calc(-64px * var(--pixel-size));
			}

			.face-left {
				top: calc(-96px * var(--pixel-size));
			}


			@keyframes moveSpritesheet {
				from {
					transform: translate3d(0px, 0, 0)
				}

				to {
					transform: translate3d(-100%, 0, 0)
				}
			}
		</style>

			<img class="Character_shadow pixelart" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacterShadow.png"
			 alt="Shadow" />

			<img class="Character_spritesheet pixelart face-down" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/DemoRpgCharacter.png"
			 alt="Character" />


		</div>